<template>
    <div class="left-aside-box">
        <el-menu
                class="menu"
                :default-active="$route.path"
                :collapse="navShow"
                unique-opened
                router
                @select="handleSelect"
        >
            <template v-for="(list,i) in menuData">
                <el-submenu v-if="true" :key="i" :index="list.path">
                    <template slot="title">
                        <i :class="list.icon"></i>
                        <span>{{list.title}}</span>
                    </template>
                    <el-menu-item v-for="(list1,i) in list.subs"
                                  :key="i"
                                  :index="list1.path">
                        <i :class="list1.icon"></i>
                        <span>{{list1.title}}</span>
                    </el-menu-item>
                </el-submenu>
            </template>
        </el-menu>
    </div>
</template>
<script>
    import bus from "../common/bus";

    export default {
        name: "aside.vue",
        data() {
            return {
                navShow: false, //导航是否折叠
                menuData: [
                    {
                        icon: "el-icon-s-home",
                        path: "p_home",
                        title: "系统首页",
                        subs: [
                            {
                                page: true,
                                path: "index",
                                title: "项目管理",
                                icon: "el-icon-s-flag"
                            },
                            {
                                page: true,
                                path: "PublicInterface",
                                title: "公共接口",
                                icon: "el-icon-edit-outline"
                            },
                            {
                                page: true,
                                path: "testPlan",
                                title: "计划管理",
                                icon: "el-icon-date"
                            },
                        ]
                    },
                    {
                        icon: "el-icon-document-copy",
                        path: "Report",
                        title: "报告管理",
                        subs: [
                            {
                                page: true,
                                path: "showReportView",
                                title: "结果报表",
                                icon: "el-icon-s-data"
                            },
                        ]
                    },
                    {
                        icon: "el-icon-setting",
                        path: "p_setting",
                        title: "系统设置",
                        subs: [
                            {
                                page: true,
                                path: "userOperate",
                                title: "人员管理",
                                icon: "el-icon-user"
                            },
                            {
                                page: true,
                                path: "sendEmail",
                                title: "邮件配置",
                                icon: "el-icon-message"
                            },
                        ]
                    },
                ]
            };
        },
        created() {
            var permitAllList = this.getPermitList();
            this.setPermitMenus(this.menuData, permitAllList); // 获取想要在页面展示的权限，
            bus.$on("navShowChange", navShow => {
                // 接受header.vue中 bus.$emit（“navShowChange”，this.navhsow）发过来的出数据
                this.navShow = navShow; // 将header.vue的navshow中的值传到这个组件this.navShow（就是bus.js中的勾搭） 大佬导航
            })
        },
        methods: {
            // 获取权限菜单,返回所有权限子模块，最后在页面展示 = list
            handleSelect(index){ // 回调参数解决路由问题

                this.$router.push("/"+index)

            }            ,
            getPermitMenus(menuList) {
                // filter 以数组返回所有符合条件的值，--->some 只返回一个TRUE/FASLE
                return menuList.filter(item => {
                    return item.hasPermit == true
                }); // 获取所有权限
            },
            // 获取权限集合
            getPermitList() {
                var rulelist = this.getRulesSet();
                var homeChilds = this.getHomeChilds();
                var hasPermit = [];
                for (var i = 0; i < homeChilds.length; i++) {
                    var route = homeChilds[i];
                    if (route.meta && route.meta.role) {
                        var routeRules = route.meta.role;
                        var hasPermission = rulelist.some(item => { /* rulelist */
                            return routeRules.includes(item);
                        });
                        if (hasPermission && !hasPermit.includes(route.path)) { // 多次获取权限列表，如果权限不存在则push到list中

                            hasPermit.push(route.path)
                            return hasPermit
                        }
                    }
                }
            },
            // 给菜单设置权限 menuList-》所有的权限  permitPathList-》可以看到的权限（不一定最全）
            setPermitMenus(menuList, permitPathList) {
                for (var i = 0; i < menuList.length; i++) {
                    var menu = menuList[i];
                    if (menu.page && menu.path) {
                        var hasPermit = permitPathList.some(permitPath => {
                            // some方法用于检测数组中的元素是否满足指定条件（函数提供）只要有一个返回则为true
                            // 不改变原来数组的排序，有返回TRUE没有返回FALSE，依次检查，碰到满足条件不会向下再检查
                            return permitPath.path == "/" + menu.path
                        });
                        menu.hasPermit = hasPermit
                    }
                    if (menu.subs) {
                        this.setPermitMenus(menu.subs, permitPathList);// 迭代
                    }
                }
            },
            // 获取子路由
            getHomeChilds() {
                var routes = this.$router.options.routes;
                var homeRoute = routes.find(item => {
                    return item.path == "/home";
                });
                return homeRoute.children;
            },
            // 在session获取denglu角色权限集合
            getRulesSet() {
                var all = [];
                var juese = sessionStorage.getItem("position"); // 获取header组件放到session中的position值
                if (juese.indexOf("|") != -1) { // A|B|C 多个角色取集合
                    all = juese.split("|");
                } else {
                    all.push(juese);
                }
                return all;
            }
        },
        computed: { // 计算属性 起监控作用，有缓存，数据依赖改变时候更新值，如果监控对象不是响应式依赖，那么永不更新
            // 监控路由
            // monitorRoute() {
            //     console.log("this.$route.path",this.$route.path.toString())
            //     return  this.$route.path.replace("/", "",)
            // }
        }


    }
</script>

<style lang="scss">
    .left-aside-box {
        .menu {
            height: 100%;
        }

        .menu:not(.el-menu--collapse) { // 设置menu下 非el-menu--collapse 标签以外的宽度为200px 背景色：#c2e7b0
            width: 200px;
            background-color: #e4e4e4;
        }
    }

</style>